<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    /* 
        flex布局 企业中更推荐使用的布局方式
        浮动布局脱标问题,在使用浮动进行布局的时候,如果父盒子没有设置高度,布局为float,那么这个父盒子下面一但有别的盒子,别的盒子会往上走,相当于没有这个父盒子.
        flex布局和浮动的效果是差不多的，但是flex布局没有上面说的浮动产生的脱标问题

        flex布局的特点
        使用flex布局以后元素都变成了弹性盒子,即使是span标签设置宽高也能生效

        主要看父盒子没有设置高度,由最高的子盒子自动撑开.没有出现脱标的情况.说明 flex布局更简洁
    */
    .box {

        /* 设置flex布局 */
        display: flex;

        /* 父盒子的宽度 */
        width: 800px;
        /* 父级不设置高度也不会出现脱标的情况,父盒子的高度由子盒子来决定*/
        /*height: 200px;*/
        border: 1px solid black;
    }

    .one {
        width: 100px;
        height: 400px;
        background-color: pink;
    }
    .two {
        width: 200px;
        height: 200px;
        background-color: green;
    }
    .three {
        width: 300px;
        height: 200px;
        background-color: yellow;
    }

</style>

<body>
    <div class="box">
        <div class="one"></div>
        <div class="two"></div>
        <div class="three"></div>
    </div>
</body>

</html>